.no-wrap () {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// 自定义不换行行数
.no-wrap-number(@number) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: @number;  
  -webkit-line-clamp: @number;
  -webkit-box-orient: vertical;
}

// 扩展点击区域
.extend-click() {
  position: relative;  
  &::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
}

// 1px边框
.border-1px(@color) {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid @color;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) {
    &::after {
      width: 300%;
      height: 300%;
      transform: scale(0.333);
      transform-origin: 0 0;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) {
    &::after {
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      transform-origin: 0 0;
    }
  }
}

// 1px边框
.border-tb-1px(@color) {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid @color;
    border-bottom: 1px solid @color;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) {
    &::after {
      width: 300%;
      height: 300%;
      transform: scale(0.333);
      transform-origin: 0 0;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) {
    &::after {
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      transform-origin: 0 0;
    }
  }
}

// 1px上边框
.border-t-1px(@color) {
  position: relative;
  &::after {
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform-origin: 0 0;
    background-color: @color;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) {
    &::after {
      transform: scaleY(0.333);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) {
    &::after {
      transform: scaleY(0.5);
    }
  }
}

// 1px右边框
.border-r-1px(@color) {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    transform-origin: 0 0;
    background-color: @color;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) {
    &::after {
      transform: scaleX(0.333);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) {
    &::after {
      transform: scaleX(0.5);
    }
  }
}

// 1px下边框
.border-b-1px(@color) {
  position: relative;
  &::after {
    content:"";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    transform-origin: 0 0;
    background-color: @color;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) {
    &::after {
      transform: scaleY(0.333);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) {
    &::after {
      transform: scaleY(0.5);
    }
  }
}

// 1px左边框
.border-l-1px(@color) {
  position: relative;
  &::after {
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    transform-origin: 0 0;
    background-color: @color;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) {
    &::after {
      transform: scaleX(0.333);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) {
    &::after {
      transform: scaleX(0.5);
    }
  }
}